<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html,charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="include/heade-detail.jsp"></jsp:include>
<body>
	<div class="container">
		<header id="header" class="">
			<nav>
				<ul id="top-menu">
					<li class="subscribed"><a href="#nowhere" class="jSubs"
						title="subscribed"><em>@</em> subscribed <span>+</span></a></li>
					<li class="voucher"><a href="#nowhere" title="my vouchers"><em>,</em>
							my vouchers</a></li>
					<li class="login"><a href="#nowhere" class="jLogin"
						title="login">ÄÄng kÃ½ <em>{</em>
					</a>
						<div class="login-option">
							<div class="arrow">
								<em>'</em>
							</div>
							<!-- <h1>Login</h1> -->
							<form action="" id="jLogin" method="get" accept-charset="utf-8">
								<p>
									<label for="">Your Email Address:</label> <input type="text"
										name="jEmail" value="" placeholder="">
								</p>
								<p>
									<label for="">Password:</label> <input type="text" name="jPass"
										value="" placeholder="">
								</p>
								<p class="forgot">
									<a href="" title=""> Forgot your password?</a> <a href="@"
										title="">Sign up</a>
								</p>
								<p class="remember">
									<input type="checkbox" name="" value=""> <label for="">Remember
										me on this computer</label> <br class="clear">
								</p>
								<p class="login">
									<input type="submit" name="" value="Login to Mdeal">
								</p>
							</form>
							<div class="social-login">
								<h1>login with socia media</h1>
								<a href="#" title="facebook" class="facebook"><em>f</em>Facebook</a>
								<a href="#" title="Twitter" class="twitter"><em>t</em>Twitter</a>
								<br class="clear">
							</div>
						</div></li>
					<li class="signup"><a href="#nowhere" title="sign up"><em></em>
							sign up</a></li>
					<li class="user"><a href="#" title="">VÃµ Minh Máº«n</a>
						<div class="userPanel">
							<ul>
								<li class="first"><a href="#" title=""><em>U</em> My
										account</a></li>
								<li><a href="#" title=""><em>,</em> Purchase history</a></li>
								<li><a href="#" title=""><em>P</em> Subsciption</a></li>
								<li class="last"><a href="#" title=""><em>X</em> Log
										out</a></li>
							</ul>
						</div></li>
				</ul>
			</nav>
		</header>
		<!-- /header -->

		<aside class="grid_3">
			<section class="logo">
				<img src="images/logo.png" alt="">
			</section>
			<!-- END SECTION LOGO -->
			<jsp:include page="include/left-category.jsp"></jsp:include>
		</aside>
		<!-- END ASIDE -->

		<article class="grid_9">

			<section class="top-tabs">
				<nav id="tabs">
					<ul>
						<li class="first"><a href="#nowhere" title="">travel</a></li>
						<li class="active"><a href="#nowhere" title="">entertainment</a></li>
						<li><a href="#nowhere" title="">technology</a></li>
					</ul>
					<form action="" method="get" id="search" accept-charset="utf-8">
						<input type="text" name="" value="" placeholder="insert your item">
						<input type="submit" name="" value="l">
					</form>
					<br class="clear">
				</nav>
			</section>
			<!-- END SECTION TABs -->
			<c:choose>
				<c:when test="${requestScope.deal == null }">
					<jsp:forward page="error/error.jsp"></jsp:forward>
				</c:when>
				<c:otherwise>
					<section id="detail">
						<div id="top-item">
							<script src="js/jquery.nivo.js" type="text/javascript"></script>
							<div class="slider">
								<div class="images theme-default">
									<c:forEach var="image" items="${requestScope.images}">
										<img src="${image.image}" width="350" height="335"
											alt="${image.title}">
									</c:forEach>
								</div>
								<!-- END MAGES -->
								<!--<div class="nivo-controlNav">
                        <a href="#" title="">1</a>
                        <a href="#" title="">2</a>
                        <a href="#" title="">3</a>
                        <a href="#" title="">4</a>
                    </div> -->
								<!-- END CONTROL -->
							</div>
							<!-- END SLIDER -->
							<div class="small-descript">
								<div class="top-descript">
									<h1>${deal.title}</h1>
									<p>${deal.short_content}</p>
									<h3>
										<fmt:formatNumber type="number" maxIntegerDigits="10"
											value="${deal.price_down}" />
										<sub>VND</sub>
									</h3>
									<h4>
										<a href="#" class="button blue super upper" title="">Buy
											deal</a>
									</h4>
									<div class="clear"></div>
								</div>
								<div class="detail-all">
									<h1>
										<small>g</small>2759
									</h1>
									<h2>
										<small>%</small>-${deal.percentage}%
									</h2>
									<h3>
										<em>P</em>
										<fmt:formatDate pattern="hh:mm:ss" value="${deal.count_down}" />
									</h3>
									<h4>
										<br class="clear">
									</h4>
								</div>
							</div>
							<!-- END SMALL DESCRIPTION -->
							<div class="clear"></div>
						</div>
						<!-- TOP ITEM -->


						<div id="middle-info">
							<div class="hightligh">
								<h1>Äáº·c Äiá»m ná»i báº­t</h1>
								<div class="info">${deal.long_content}</div>
							</div>
							<!-- END HIGHTLIGHT -->
							<div class="rules">
								<h1>Äiá»u kiá»n sá»­ dá»¥ng</h1>
								<div class="info">
									<ul>
										<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
											elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
											sociis natoque penatibus et magnis dis parturient montes,
											nascetur ridiculus mus. Donec quam felis, ultricies nec,
											pellentesque eu, pretium quis, sem. Nulla consequat massa
											quis enim. Donec pede justo, fringilla vel, aliquet nec,
											vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
											venenatis vitae, justo. Nullam dictum felis eu pede mollis
											pretium.</li>
										<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
											elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
											sociis natoque penatibus et magnis dis parturient montes,
											nascetur ridiculus mus. Donec quam felis, ultricies nec,
											pellentesque eu, pretium quis, sem. Nulla consequat massa
											quis enim. Donec pede justo, fringilla vel, aliquet nec,
											vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
											venenatis vitae, justo. Nullam dictum felis eu pede mollis
											pretium.</li>
										<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
											elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
											sociis natoque penatibus et magnis dis parturient montes,
											nascetur ridiculus mus. Donec quam felis, ultricies nec,
											pellentesque eu, pretium quis, sem. Nulla consequat massa
											quis enim. Donec pede justo, fringilla vel, aliquet nec,
											vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
											venenatis vitae, justo. Nullam dictum felis eu pede mollis
											pretium.</li>
									</ul>
								</div>
							</div>
							<!-- END RULE -->
							<div class="clear"></div>
						</div>
						<!-- END MIDDLE -->

						<div id="description">
							<div class="decLeft">
								<ul id="nav">
									<li class="active"><a href="#" title="" class="descr">Description</a></li>
									<li><a href="#" title="" class="comment">Comments</a></li>
									<li><a href="#" title="" class="map">Map & location</a></li>
									<li><a href="#" title="" class="print">Fine print</a></li>
								</ul>
								<!-- END NAV -->
								<div id="descr" class="tabs-active">
									<h1>Lorem ipsum dolor sit amet</h1>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
										elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
										sociis natoque penatibus et magnis dis parturient montes,
										nascetur ridiculus mus. Donec quam felis, ultricies nec,
										pellentesque eu, pretium quis, sem. Nulla consequat massa quis
										enim.</p>
									<p>
										<img
											src="http://www.nhommua.net/Upload/5162/full/Tham-My-Vien-Ngoc-Dung_2012522153426343.jpg"
											width="430" alt="">
									</p>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
										elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
										sociis natoque penatibus et magnis dis parturient montes,
										nascetur ridiculus mus. Donec quam felis, ultricies nec,
										pellentesque eu, pretium quis, sem. Nulla consequat massa quis
										enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
										eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
										vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
									<p>
										<img
											src="http://www.nhommua.net/Upload/5162/full/Tham-My-Vien-Ngoc-Dung_2012522153426343.jpg"
											width="430" alt="">
									</p>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
										elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
										sociis natoque penatibus et magnis dis parturient montes,
										nascetur ridiculus mus. Donec quam felis, ultricies nec,
										pellentesque eu, pretium quis, sem. Nulla consequat massa quis
										enim.</p>
								</div>
								<!-- END DESCRIPTION -->
								<div id="comment">
									<div class="editor">
										<form action="" method="get" accept-charset="utf-8">
											<textarea></textarea>
											<h1>
												Login as: <a href="#" title=""><img
													src="images/face.png" alt=""></a> <a href="#" title=""><img
													src="images/tww.png" alt=""></a> <a href="#" title=""><img
													src="images/gg.png" alt=""></a>
											</h1>
											<input type="submit" name="" value="comment">
											<div class="clear"></div>
										</form>
										<div class="clear"></div>
									</div>
									<!-- EDITOR -->
									<div class="commentList">
										<ul>
											<li><img src="images/ava.jpg" width="50" alt="">
												<div class="cmWrap">
													<h1>
														Lorem ipsum dolor <span>Â· GiÃ¡m Äá»c Äiá»u
															hÃ nh at The M media</span>
													</h1>
													<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
														elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
														sociis natoque penatibus et magnis dis parturient montes,
														nascetur ridiculus mus. Donec quam felis, ultricies nec,
														pellentesque eu, pretium quis, sem. Nulla consequat massa
														quis enim.</p>
													<h3>
														<a href="#" title=""><em>c</em> Reply</a>Â· <a href="#"
															title=""> <em>N</em>Like
														</a>Â· 3 minutes ago
													</h3>
												</div>
												<div class="clear"></div>
												<ul>
													<li><img src="images/ava.jpg" width="50" alt="">
														<div class="cmWrap">
															<h1>
																Lorem ipsum dolor <span>Â· GiÃ¡m Äá»c Äiá»u
																	hÃ nh at The M media</span>
															</h1>
															<p>Lorem ipsum dolor sit amet, consectetuer
																adipiscing elit. Aenean commodo ligula eget dolor.
																Aenean massa. Cum sociis natoque penatibus et magnis dis
																parturient montes, nascetur ridiculus mus. Donec quam
																felis, ultricies nec, pellentesque eu, pretium quis,
																sem. Nulla consequat massa quis enim.</p>
															<h3>
																<a href="#" title=""><em>c</em> Reply</a> Â· <a href="#"
																	title="">Like</a>Â· 3 minutes ago
															</h3>
															<form action="#">
																<img src="images/ava.jpg" width="30" height="30" alt="">
																<textarea name="" id=""></textarea>
															</form>
														</div>
														<div class="clear"></div></li>
												</ul></li>
											<!-- END COMENT -->
											<li><img src="images/ava.jpg" width="50" alt="">
												<div class="cmWrap">
													<h1>
														Lorem ipsum dolor <span>Â· GiÃ¡m Äá»c Äiá»u
															hÃ nh at The M media</span>
													</h1>
													<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
														elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
														sociis natoque penatibus et magnis dis parturient montes,
														nascetur ridiculus mus. Donec quam felis, ultricies nec,
														pellentesque eu, pretium quis, sem. Nulla consequat massa
														quis enim.</p>
													<h3>
														<a href="#" title=""><em>c</em> Reply</a> Â· <a href="#"
															title="">Like</a>Â· 3 minutes ago
													</h3>
													<form action="#">
														<img src="images/ava.jpg" width="30" height="30" alt="">
														<textarea name="" id=""></textarea>
													</form>
												</div>
												<div class="clear"></div></li>
											<!-- END COMENT -->
											<li><img src="images/ava.jpg" width="50" alt="">
												<div class="cmWrap">
													<h1>
														Lorem ipsum dolor <span>Â· GiÃ¡m Äá»c Äiá»u
															hÃ nh at The M media</span>
													</h1>
													<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
														elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
														sociis natoque penatibus et magnis dis parturient montes,
														nascetur ridiculus mus. Donec quam felis, ultricies nec,
														pellentesque eu, pretium quis, sem. Nulla consequat massa
														quis enim.</p>
													<h3>
														<a href="#" title=""><em>c</em> Reply</a> Â· <a href="#"
															title="">Like</a>Â· 3 minutes ago
													</h3>
												</div>
												<div class="clear"></div></li>
											<!-- END COMENT -->
											<li><img src="images/ava.jpg" width="50" alt="">
												<div class="cmWrap">
													<h1>
														Lorem ipsum dolor <span>Â· GiÃ¡m Äá»c Äiá»u
															hÃ nh at The M media</span>
													</h1>
													<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
														elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
														sociis natoque penatibus et magnis dis parturient montes,
														nascetur ridiculus mus. Donec quam felis, ultricies nec,
														pellentesque eu, pretium quis, sem. Nulla consequat massa
														quis enim.</p>
													<h3>
														<a href="#" title=""><em>c</em> Reply</a> Â· <a href="#"
															title="">Like</a>Â· 3 minutes ago
													</h3>
												</div>
												<div class="clear"></div></li>
											<!-- END COMENT -->
										</ul>
									</div>
									<!-- COM LIST -->
								</div>
								<!-- END COMMENT -->
								<div id="map">
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
										elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
										sociis natoque penatibus et magnis dis parturient montes,
										nascetur ridiculus mus. Donec quam felis, ultricies nec,
										pellentesque eu, pretium quis, sem. Nulla consequat massa quis
										enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
										eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
										vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
									<p>
										<img
											src="http://www.nhommua.net/Upload/5162/full/Tham-My-Vien-Ngoc-Dung_2012522153426343.jpg"
											width="430" alt="">
									</p>
								</div>
								<!-- END MAP -->
								<div id="print">
									<p>
										<img
											src="http://www.nhommua.net/Upload/5162/full/Tham-My-Vien-Ngoc-Dung_2012522153426343.jpg"
											width="430" alt="">
									</p>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
										elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
										sociis natoque penatibus et magnis dis parturient montes,
										nascetur ridiculus mus. Donec quam felis, ultricies nec,
										pellentesque eu, pretium quis, sem. Nulla consequat massa quis
										enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
										eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
										vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
									<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
										elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
										sociis natoque penatibus et magnis dis parturient montes,
										nascetur ridiculus mus. Donec quam felis, ultricies nec,
										pellentesque eu, pretium quis, sem. Nulla consequat massa quis
										enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
										eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
										vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
								</div>
								<!-- END PRINT -->
							</div>
							<!-- END LEFt -->
							<div class="decRight">
								<h1>
									Trung tÃ¢m ÄÃ o táº¡o Quáº£n trá» Máº¡ng & An ninh Máº¡ng
									Quá»c Táº¿ ATHENA <br> <a href="#" title=""><em>]</em>
										www.athena.com.vn</a>
								</h1>
								<p>
									<em>)</em> 2Bis, Äinh TiÃªn HoÃ ng, P. Äa Kao, Q. 1 <br>
									Äiá»n thoáº¡i: (08)38244041
								</p>
								<p>
									<em>)</em> 92, Nguyá»n ÄÃ¬nh Chiá»u, P. Äa Kao, Q. 1 <br>
									Äiá»n thoáº¡i: (08) 2210 3801, 0907879477
								</p>
							</div>
							<!-- END RIGHT -->
							<div class="clear"></div>
						</div>
						<!-- END DESCRIPTION -->

					</section>
					<!-- END DETAIL -->
				</c:otherwise>
			</c:choose>
			<br class="clear">
		</article>
		<!-- END ARTICLE -->

		<jsp:include page="include/footer.jsp"></jsp:include>